<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>首页设置</title>
	<meta name="decorator" content="default"/>
	<script src="${ctxFront}/js/jquery.image-maps.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#inputForm").validate({
				submitHandler: function(form){
					if($(".photos").length==0){
						showJBoxMess("请上传热点图片.","error");
						return;
					}
					var isTrue = true;
					$(".photos").each(function(p){
						if($(this).find(".map-position").length==0){
							showJBoxMess("请在第"+(p+1)+"张热点图片上添加热点.","error");
							isTrue = false;
							return false;
						}
					});
					if(!isTrue) return;
					$(".hotLink").each(function(){
						if(trim($(this).val())==""){
							showJBoxMess("请输入热点链接地址.","error");
							$(this).focus();
							isTrue = false;
							return false;
						}
					});
					if(!isTrue) return;
					$(".photos #photoId").each(function(p){
						$("#photo"+p+" #mhId").each(function(m){
							var display = $(this).parent().css("display");
							if($(this).val()=="0"){
								if(display!="none"){
									var photoHtml = '<div class="ht">';
									photoHtml += '<input type="hidden" id="hotId" name="photoList['+p+'].hotList['+m+'].id" value="" />';
									photoHtml += '<input type="hidden" id="position" name="photoList['+p+'].hotList['+m+'].position" value="'+$(this).parent().find(".rect-value").val()+'" />';
									photoHtml += '<input type="hidden" id="url" name="photoList['+p+'].hotList['+m+'].url" value="'+$(this).parent().find(".hotLink").val()+'" />';
									photoHtml += '<input type="hidden" id="delFlag" name="photoList['+p+'].hotList['+m+'].delFlag" value="0"/>';
									photoHtml += '</div>';
									$(".pc"+p).append(photoHtml);
								}
							}else{
								$("input[name='photoList["+p+"].hotList["+m+"].position']").val($(this).parent().find(".rect-value").val());
								$("input[name='photoList["+p+"].hotList["+m+"].url']").val($(this).parent().find(".hotLink").val());
								if(display=="none"){
									$("input[name='photoList["+p+"].hotList["+m+"].delFlag']").val("1");
								}
							}
						});
						var pDisplay = $(this).parent().css("display");
						if($(this).find("#photoId").val()==""){
							if(pDisplay=="none"){
								$(this).remove();
							}
						}else{
							if(pDisplay=="none"){
								$("input[name='photoList["+p+"].delFlag']").val("1");
							}
						}
					});
					loading('正在提交，请稍等...');
					form.submit();
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
			
			//初始化图片热点数据
			$(".photos").each(function(i){
				$("#photo"+i).imageMaps();
			});
			
		});
		
		//上传热点图片
		function showPhotos(path){
			var cLen = $(".photos").length;  //已上传的图片数
			var photoId = "photo"+cLen;   //新上传的图片ID
			var imageId = "imgMap"+cLen;
			var photoHtml = '<div class="photos" id='+photoId+' style="width:640px;height:auto;">';
				photoHtml += '<input type="hidden" id="sort" name="photoList['+cLen+'].sort" value="30"/>';
				photoHtml += '<input type="hidden" id="photoLogoUrl" name="photoList['+cLen+'].logoUrl" value="'+path+'"/>';
				photoHtml += '<input type="hidden" id="photoId" name="photoList['+cLen+'].id" value=""/>';
				photoHtml += '<input type="hidden" id="delFlag" name="photoList['+cLen+'].delFlag" value="0"/>'
				photoHtml += '<img id='+imageId+' name="test" src="${ctx}/download?filePath='+path+'" usemap="#Map" ref="imageMaps"/>';
				photoHtml += '<map name="Map"></map>';
				photoHtml += '</div>';
				photoHtml += '<div class="pc'+cLen+'"></div>'
			$("#hotImage").append(photoHtml);
			$("#"+photoId).imageMaps();
		}
		
	</script>
</head>
<body>
	<ul class="nav nav-tabs">
		<li class="active"><a href="${ctx}/ivm/mall/index">首页设置</a></li>
	</ul><br/>
	<form:form id="inputForm" modelAttribute="index" action="${ctx}/ivm/mall/index/save" method="post" class="form-horizontal">
		<tags:message content="${message}"/>
		<div class="control-group">
			<label class="control-label"><span class="color-red font-size20">*</span>热点图片:</label>
			<div class="controls" id="hotImage">
				<c:forEach items="${photoList}" var="photo" varStatus="vs">
				<div class="photos" id="photo${vs.index }" style="width:640px;height:auto;">
					<input type="hidden" id="sort" name="photoList[${vs.index }].sort" value="${photo.sort }"/>
					<input type="hidden" id="photoLogoUrl" name="photoList[${vs.index }].logoUrl" value="${photo.logoUrl }"/>
					<input type="hidden" id="photoId" name="photoList[${vs.index }].id" value="${photo.id }"/>
					<input type="hidden" id="delFlag" name="photoList[${vs.index }].delFlag" value="${photo.delFlag }"/>
					<img id="imgMap${vs.index }" name="test" src="${ctx}/download?filePath=${photo.logoUrl}" usemap="#Map" ref="imageMaps"/>
					<map name="Map">
					<c:forEach items="${photo.hotList}" var="hot" varStatus="ht">
						<area shape="rect" coords="${hot.position }" href="${hot.url }" mhId="${hot.id }" parentId="photo${vs.index }"/>
					</c:forEach>
					</map>
				</div>
				<div class="pc${vs.index }">
					<c:forEach items="${photo.hotList}" var="hot" varStatus="ht">
					<div class="ht">
						<input type="hidden" id="hotId" name="photoList[${vs.index }].hotList[${ht.index }].id" value="${hot.id }"/>
						<input type="hidden" id="hotPhotoIdId" name="photoList[${vs.index }].hotList[${ht.index }].indexPhoto.id" value="${hot.indexPhoto.id }"/>
						<input type="hidden" id="position" name="photoList[${vs.index }].hotList[${ht.index }].position" value="${hot.position }"/>
						<input type="hidden" id="url" name="photoList[${vs.index }].hotList[${ht.index }].url" value="${hot.url }"/>
						<input type="hidden" id="delFlag" name="photoList[${vs.index }].hotList[${ht.index }].delFlag" value="${hot.delFlag }"/>
					</div>
					</c:forEach>
		   		</div>
				</c:forEach>
			</div>
		</div>
		<div class="control-group">
			<div class="controls">
			<input type="button" id="photoUploads" value="上传热点图片" class="btn"/>&nbsp;<span style="color: red;">（建议尺寸为480x640）</span>
			</div>
		</div>
		<div class="form-actions">
			<shiro:hasPermission name="ivm:mall:index:edit"><input id="btnSubmit" class="btn btn-primary" type="submit" value="保 存"/>&nbsp;</shiro:hasPermission>
			<input id="btnCancel" class="btn" type="button" value="返 回" onclick="history.go(-1)"/>
		</div>
	</form:form>
</body>
</html>
